/**
 * 周次选择器组件
 */

'use client';

import React, { useState, useRef, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { ChevronDown, X } from 'lucide-react';
import { useAnimation } from '@/hooks/useAnimation';
import { clsx } from 'clsx';

export interface WeekSelectorProps {
  /** 是否打开 */
  isOpen: boolean;
  /** 打开状态变化回调 */
  onOpenChange: (isOpen: boolean) => void;
  /** 当前周次 */
  currentWeek: number;
  /** 可选择的周次列表 */
  availableWeeks: number[];
  /** 周次变化回调 */
  onWeekChange: (week: number) => void;
  /** 自定义类名 */
  className?: string;
}

export const WeekSelector: React.FC<WeekSelectorProps> = ({
  isOpen,
  onOpenChange,
  currentWeek,
  availableWeeks,
  onWeekChange,
  className,
}) => {
  const { shouldRender, animationState } = useAnimation(isOpen);

  const handleWeekSelect = (week: number) => {
    onWeekChange(week);
    onOpenChange(false);
  };

  const handleClose = () => {
    onOpenChange(false);
  };

  const WeekSelectorModal = () => (
    <>
      {/* 背景遮罩 */}
      <div
        className={clsx(
          'fixed inset-0 ',
          `backdrop-${animationState}`
        )}
        onClick={handleClose}
      />

      {/* 弹窗内容 */}
      <div
        className={clsx(
          'fixed top-0 left-0 right-0 bg-white rounded-b-2xl shadow-2xl z-50 p-4',
          `menu-drawer-${animationState}`
        )}
      >
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-lg font-semibold text-gray-800">选择周次</h3>
          <button onClick={handleClose} className="p-2 rounded-full hover:bg-gray-100">
            <X className="w-5 h-5 text-gray-600" />
          </button>
        </div>

        <div className="grid grid-cols-5 gap-3 max-h-[50vh] overflow-y-auto pb-4">
          {availableWeeks.map((week) => (
            <button
              key={week}
              onClick={() => handleWeekSelect(week)}
              className={clsx(
                'flex flex-col items-center justify-center aspect-square rounded-xl transition-all duration-200 transform active:scale-95',
                week === currentWeek
                  ? 'bg-blue-500 text-white shadow-lg'
                  : 'bg-gray-100 text-gray-700 hover:bg-blue-100'
              )}
            >
              <span className="text-sm">第</span>
              <span className="text-xl font-bold">{week}</span>
              <span className="text-sm">周</span>
            </button>
          ))}
        </div>
      </div>
    </>
  );

  return (
    <div className={clsx('relative', className)}>
      {/* 触发按钮 */}
      <button
        className="flex items-center gap-1 px-3 py-1.5 bg-white/80 backdrop-blur-sm rounded-full text-gray-700 font-medium transition-all shadow-md hover:bg-white active:scale-95"
        onClick={() => onOpenChange(true)}
      >
        <span>第 {currentWeek} 周</span>
        <ChevronDown className={clsx('w-4 h-4 transition-transform', isOpen && 'rotate-180')} />
      </button>

      {/* 弹窗 (Portal 渲染) */}
      {shouldRender && createPortal(<WeekSelectorModal />, document.body)}
    </div>
  );
};
